<script setup lang='ts'>
import { useGetMemberRecord } from '@fl/api/member-api/member'
import { cloneDeep } from 'lodash-es'
import { computed, onMounted, ref, toRefs } from 'vue'

import ListItem from './list.vue'
import RightTable from './right-table.vue'

const props = defineProps<{
    info: any
}>()
const { info } = toRefs(props)

const { push } = useRouter()

const total = ref(0)
const state = {
    page: 1,
    size: 10,
}
const pages = ref(cloneDeep(state))
const params = computed(() => {
    return {
        ...pages.value,
    }
})
const { data, isLoading } = useGetMemberRecord(params)

const records = ref([])
const show = ref(false)
const checked = ref(false)
const activeName = ref(0)

const hasRecord = computed(() => data?.value?.records?.length)

const tabs = computed(() => {
    let target: any = []
    // 运营端是否配置会员等级 0 否 1 是
    if (info?.value?.configMemberLevelFlag === 1) {
        target = hasRecord.value ? ['缴费记录', '严选会员权益介绍'] : ['严选会员权益介绍']
    }
    else {
        target = ['缴费记录']
    }

    return target
})

const showRight = computed(() => tabs.value[activeName.value] === '严选会员权益介绍')

watchEffect(() => {
    if (data.value) {
        records.value = data.value.records
        total.value = data.value.total
    }
})

function handleClick(tab: any) {
    if (tab === 0) {
        pages.value = { ...state }
    }
    cacheTab()
}

function doAdd() {
    // 已禁用会员 不可发起申请开通会员
    if (info.value?.memberStatus === 2) {
        return
    }
    if (!checked.value) {
        ElMessage({ message: '请阅读并同意《会员协议》', type: 'warning' })
        return
    }

    push('/member-add?orderType=1')

    cacheTab()
}

// 缓存当前tab
function cacheTab() {
    window.sessionStorage.setItem('MEMBER_TAB', String(activeName.value))
}

function doRead() {
    show.value = true
}

function doAgree() {
    checked.value = true
    show.value = false
}

function init() {
    const str = window.sessionStorage.getItem('MEMBER_TAB')
    if (str) {
        activeName.value = Number(str)
    }
}

onMounted(() => {
    init()
})

defineExpose({
    cacheTab,
})
</script>

<template>
    <el-tabs v-model="activeName"
             v-loading.fullscreen.lock="isLoading"
             class="demo-tabs"
             @tab-change="handleClick"
    >
        <el-tab-pane v-for="(tab, index) in tabs"
                     :key="index"
                     :label="tab"
                     :name="index"
        />
    </el-tabs>

    <template v-if="showRight">
        <div class="p-20 pt-10 bg-#fff h-full w-full">
            <RightTable />

            <div class="flex flex-col items-center">
                <span class="btn-sty"
                      :class="{ disabledSty: info?.memberStatus === 2 }"
                      @click="doAdd"
                >
                    立即开通
                </span>

                <p>
                    <el-checkbox v-model="checked"
                                 class="vertical-middle"
                    >
                        本人已阅读并同意
                    </el-checkbox>

                    <span class="c-blue cursor-pointer"
                          @click="doRead"
                    >《会员协议》</span>
                </p>
            </div>
        </div>
    </template>

    <!-- 缴费记录 -->
    <ListItem v-else
              v-model:pager="pages"
              :list="records"
              :total="total"
    />

    <el-dialog v-model="show"
               class="dialog-sty"
               width="800"
    >
        <p>
            欢迎您注册成为本平台的会员。在您使用本平台提供的服务之前，请仔细阅读本协议内容。本协议是您与本平台之间关于注册成为会员并享受相应服务所订立的协议。当您完成注册程序，或以其他本平台允许的方式实际使用本平台提供的服务时，即表示您已完全同意并接受本协议的全部内容。
        </p>

        <div class="content">
            <p class="agree-title">
                一、会员注册
            </p>

            <p>
                1.您在注册成为会员时必须向本平台提供真实、准确、完整的个人信息，如个人信息有任何变动，应及时更新。如果您提供的个人信息不真实、不准确、不完整或已经失效，本平台有权暂停或终止您的会员服务，并拒绝您继续使用本平台提供的服务。
            </p>

            <p>2.您在注册个人信息时，应选择一个唯一且符合相关规定的用户名和密码。您应当妥善保管自己的账号和密码，不得向其他任何人透露。因您未保管好自己的账号和密码而遭受的损失由您自行承担。</p>

            <p>3.您在注册成为会员时，需要同意遵守本平台的用户行为规范，不得利用会员资格从事任何违法活动。</p>

            <p class="agree-title">
                二、会员权利和义务
            </p>

            <p>1.本平台保留会员资格的审核权利，对于不符合相关要求或存在违规行为的用户，本平台有权取消其会员资格。</p>

            <p>2.会员有权享受本平台提供的各项服务，并有权参与平台中的各项活动。</p>

            <p>3.会员应当遵守平台的各项规章制度，保护自己的账号和密码安全，不得以任何形式对外转让账号。</p>

            <p>4.会员在使用本平台服务时，需遵守国家相关法律法规，不得利用平台从事违法活动，否则后果由会员自行承担。</p>

            <p>5.本平台保留对会员行为进行监督的权利，如发现会员违规行为，有权对其采取相应措施。</p>

            <p>6.会员应当定期检查和更新自己的注册信息，确保信息的准确性。任何由于注册信息错误导致的问题，本网站慨不负责。</p>

            <p class="agree-title">
                三、免责条款
            </p>

            <p>1.本网站不对因不可抗力、网络故障、通讯线路、技术故障、电脑病毒、黑客攻击等非本网站过失造成的损失承担责任。</p>

            <p>2.会员对使用本平台服务所遇到的无法正常使用、或因网络原因造成的其他问题不得进行侵权行为。</p>

            <p>3.本网站对会员在本网站上的行为不负任何法律责任；</p>

            <p>4.本网站有权根据法律法规和业务需求随时修改本协议，修改后的协议自发布之日起生效，会员的继续使用即视为接受修改后的协议。</p>

            <p class="agree-title">
                四、协议的修改和解释
            </p>

            <p>1.本协议的解释权归本平台所有。</p>

            <p>2.本协议自发布之日起生效，本网站有权随时对本协议进行修改，并在网站上公示。修改后的协议一经公示即产生效力。您继续使用本网站的服务即表示您同意接受修改后的协议。</p>

            <p class="agree-title">
                五、其他条款
            </p>

            <p>1.本协议构成双方之间关于本网站会员注册事宜的最终协议，本协议未约定的其他事项，均遵循本网站的相关规定；</p>

            <p>2.若本协议中的任何条款无效或不可执行，不影响其他条款的效力；</p>

            <p>
                3.本协议的最终解释权归本网站所有。请您务必审慎阅读并充分理解本协议各条款内容，特别是免除或限制责任的条款、管辖法律和法院的约定条款。
            </p>
        </div>

        <p>如果您不同意本协议任何内容，或者无法准确理解可能产生的法律后果，请停止注册。只有您完全同意所有条款才可完成注册成为会员。感谢您的配合！祝您在本网站愉快的消费体验！</p>

        <template #footer>
            <div class="text-center">
                <ElButton type="primary"
                          @click="doAgree"
                >
                    同意并继续
                </ElButton>
            </div>
        </template>
    </el-dialog>
</template>

<style lang="less" scoped>
.content {
    p {
        padding-left: 20px;
    }

    .agree-title {
        font-weight: 600;
        padding-left: 0;
        margin-top: 10px;
    }
}

.table-sty {
    :deep(.vxe-header--row) {
        background: #333;
        color: #fff;
    }
}

.btn-sty {
    padding: 8px 50px;
    border-radius: 4px;
    cursor: pointer;
    color: #fff;
    background: linear-gradient(to right, #8086ad, #1e2244);
    margin-bottom: 30px;
    margin-top: 50px;
}

.disabledSty {
    cursor: not-allowed;
    background: #f4f4f5;
    color: #909399;
}
</style>

<style>
.dialog-sty {
    padding-top: 20px !important;
}

.dialog-sty .el-dialog__header {
    display: none;
}
</style>
